import React, {useCallback, useState} from 'react'
import { Route, useLocation, useHistory, useRouteMatch, useParams } from 'react-router-dom'

import Intheaters from './Intheaters'
import Comingsoon from './Comingsoon'

import MyNavLink from '@/components/MyNavLink'

export default function movies(props) {
  
  // const location = useLocation()
  // const history = useHistory()
  // const params = useParams()
  const { path } = useRouteMatch()

  const [tabs] = useState([
    {
      id: '001',
      title: '正在热映',
      path: `${path}/intheaters`
    },
    {
      id: '002',
      title: '即将上映',
      path: `${path}/comingsoon`
    }
  ])

  // console.log(location)
  // console.log(history)
  // console.log(match)
  // console.log(params)

  // const handleChangePath = useCallback(
  //   path => {
  //     props.onChangePath(path)
  //   }
  // )
  
  return (
    <>
      <ul>
        {
          tabs.map(tab => (
            <MyNavLink
              key={tab.id}
              route={tab}
              // onChangePath={handleChangePath}
            ></MyNavLink>
          ))
        }
      </ul>
      <div>
        <Route path={`${path}/intheaters`}>
          <Intheaters></Intheaters>
        </Route>
        <Route path={`${path}/comingsoon`}>
          <Comingsoon></Comingsoon>
        </Route>
      </div>
    </>
  )
}
